---
title: <media-airplay-button>
description: Media Airplay Button
layout: ../../../../layouts/ComponentLayout.astro
source: https://github.com/muxinc/media-chrome/tree/main/src/js/media-airplay-button.js
---

import SandpackContainer from "../../../../components/SandpackContainer.astro";

The `<media-airplay-button>` component is used to bring up the AirPlay menu and select AirPlay playback. The behavior of the `<media-airplay-button>` will update automatically based on the availability of AirPlay support.

The button will display the contents of the `icon` slot, if provided.

> NOTE: AirPlay is only available in Safari browsers.

## Default usage

<SandpackContainer
  html={`<media-controller>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  ></video>
  <media-airplay-button></media-airplay-button>
</media-controller>`}
/>

## Customize icons

You can modify the contents of the `<media-airplay-button>` component using slots.
This is useful if you'd like to use your own custom AirPlay button instead of the default one provided by media-chrome.

Here's an example of how you can replace the default icon with the string "AIRPLAY".

<SandpackContainer
  html={`<media-controller>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  ></video>
  <media-airplay-button>
    <span slot="icon">AIRPLAY</span>
  </media-airplay-button>
</media-controller>`}
/>

## Styling with attributes

The `<media-airplay-button>` doesn't expose any configuration attributes.
However, it will be updated with [Media UI Attributes](#media-ui-attributes) any time the selected caption or subtitle changes.

You can use these attributes to style the button. For example, if airplay is unavailable, hide the button:

```css
media-airplay-button[mediaairplayunavailable] {
  display: none;
}
```
